<template>
  <div class="mine">
    <div class="author-info-wrapper">
      <div class="author-info">
        <div class="avatar"><img src="http://toutiao.itheima.net/images/user_head.jpg"></div>
        <div class="aut-id">13345687542</div>
        <div class="aut-info">
          <span>个人信息</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="aut-count">
        <div>
          <span>0</span>
          <span>动态</span>
        </div>
        <div>
          <span>0</span>
          <span>关注</span>
        </div>
        <div>
          <span>0</span>
          <span>粉丝</span>
        </div>
        <div>
          <span>0</span>
          <span>被赞</span>
        </div>
      </div>
      <van-grid>
        <van-grid-item
          icon="bulb-o"
          text="消息通知"
        />
        <van-grid-item
          icon="like-o"
          text="我的收藏"
        />
        <van-grid-item
          icon="clock-o"
          text="阅读历史"
        />
        <van-grid-item
          icon="award-o"
          text="我的作品"
        />
      </van-grid>
    </div>
    <div class="aut-more">
      <div class="aut-title">更多服务</div>
      <van-grid icon-size="24">
        <van-grid-item
          icon="question-o"
          text="用户反馈"
        />
        <van-grid-item
          icon="service-o"
          text="小智同学"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MinePage',
  data() {
    return {

    };
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
@import url("@/assets/styles/common.less");

.mine {
  background-color: #f8f8f8;

  .author-info-wrapper {
      padding: 16px;
      box-sizing: border-box;
      width: 100%;
      height: 220px;
      background-image: linear-gradient(135deg, #4c4978, #9ea0c8);
      border-radius: 0 0 10% 10%;

    .author-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 16px;
      color: #fff;

      .avatar {
        .avatar(24px);
      }
      .aut-id {
        margin-right: 80px;
        font-size: 20px;
      }
      .aut-info {
        font-size: 12px;
        color: #f8efe9;

        span {
          margin-right: 4px;
        }
      }
    }
    .aut-count {
      display: flex;
      justify-content: space-around;
      color: #eeeae7;
      font-size: 14px;
      margin-top: 32px;
      margin-bottom: 24px;

      div {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .aut-more {
    margin-top: 50px;
    margin-left: 18px;
    width: 340px;
    background-color: #fff;
    box-sizing: border-box;
    padding-top: 8px;

    .aut-title {
      margin-left: 8px;
    }
  }
}
</style>
